<!DOCTYPE html>
<html>
  <head>
    <title>KiteMusic</title>
    <meta charset="utf-8" />
    <script src="plugins/jquery/jquery-3.7.1.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=0.8" />
    <!-- ICON -->
    <link rel="icon" href="icon.png" type="images/x-icon" />
    <!-- 核心样式载入 -->
    <link rel="stylesheet" href="styles/core.css" />
    <!-- 默认竖屏样式 -->
    <link rel="stylesheet" href="styles/mods/Vertical.css" id="SrceenFork" />
  </head>
  <body>
    <!-- 应用程序视图框架 -->
    <div class="application-framework">
      <!-- TODO:在此载入必需资源 -->
      <!-- TODO:全局数据优先载入 -->
      <script src="resoures/Groups/GroupEnum.js"></script>
      <script src="resoures/Groups/GroupStatic.js"></script>
      <script src="resoures/Groups/GroupVariable.js"></script>
      <script src="resoures/models/UserSetting.js"></script>
      <script src="resoures/models/ThemeConfig.js"></script>
      <!-- TODO:其次载入必需脚本 -->
      <script src="scripts/utils/logger.js"></script>
      <script src="scripts/utils/import.js"></script>
      <script src="scripts/utils/utils.js"></script>
      <script src="scripts/utils/view.js"></script>
      <!-- 这是页面初始化页面 -->
      <div class="application-load">
        <!-- TODO:这里写应用加载界面 -->
        <div class="animate__animated animate__fadeInUp load-text">
          <h2>&nbsp;正在加载核心资源.....</h2>
          <hr />
          <p>
            KiteMusic是由KitePromiss工作室公益开源开发,获得MIT许可,任何人不可以违反MIT许可,另外,本软件用到的所有API均由CengGuiGui提供,感谢支持.
          </p>
          <p>Have A Nice Day.</p>
          <p>KitePromiss工作室</p>
        </div>
        <div class="loader">
          <span><span></span><span></span><span></span><span></span></span>
          <div class="base">
            <span></span>
            <div class="face"></div>
          </div>
        </div>
        <div class="longfazers">
          <span></span><span></span><span></span><span></span>
        </div>
        <!-- TODO:加载界面载入模块信息 -->
        <script src="resoures/models/ModInfomation.js"></script>
        <!-- TODO:这里进行各种初始化操作 -->
        <script src="plugins/layui/layui.js"></script>
        <script src="scripts/inits/staticInit.js"></script>
        <script src="scripts/inits/coreInit.js"></script>
        <script src="scripts/inits/listenceScreen.js"></script>
        <script src="scripts/inits/modulesInit.js"></script>
        <script src="plugins/mui/dist/js/mui.min.js"></script>
      </div>
      <!-- 这是应用程序主要页面框架 -->
      <div class="animate__animated animate__faster application-core">
        <!-- 主要内容 -->
        <div class="app-content">
          <div class="swiper" id="colll">
            <div class="swiper-wrapper sww">
              <div class="swiper-slide ss more">
                <!-- 扩展页面有多种容器 -->
                <div class="qq-page">
                  <div class="qqm-head">
                    <p>QQ音乐每日歌单</p>
                  </div>
                  <div class="qqm-coll"></div>
                </div>
                <div class="search-page">
                  <!-- 搜索栏 -->
                  <div class="sear-inp-coll">
                    <input
                      type="text"
                      class="mui-input-clear"
                      id="searinput"
                      placeholder="请输入歌名或者歌手名..."
                    />
                    <div class="toggle-coll">
                      <img src="icons/wangyiyun.svg">
                    </div>
                    <div class="sear-coll">
                      <img src="images/icon/search.svg">
                    </div>
                  </div>
                  <!-- 歌曲列表 -->
                  <div class="sear-list-coll"></div>
                </div>
              </div>
              <div class="swiper-slide ss mod">
                <div class="a-card">
                  <div class="a-loader">
                    <p>Notices:</p>
                    <div class="a-words">
                      <span class="a-word"></span>
                      <span class="a-word">在内测版本,bug时有发生,一般来说不影响使用</span>
                      <span class="a-word">有人要吃宵夜吗 *> _ <* </span>
                      <span class="a-word">美妙的夜生活即将启航!</span>
                      <span class="a-word">嘉嘉,崽很想你...</span>
                    </div>
                  </div>
                </div>
                <article class="content-list">
                  <!-- 网易云模块 -->
                  <div class="box-ses net showThis" data-car="netmusic">
                    <img src="images/icon/netmusic.png" />
                    <span>随机网易云</span>
                  </div>
                  <!-- 助眠模块 -->
                  <div class="box-ses sleep" data-car="sleepmusic">
                    <img src="images/icon/sleepmusic.png" />
                    <span>助眠钢琴曲</span>
                  </div>
                  <!-- QQ音乐模块 -->
                  <div class="box-ses qqmus" data-car="qqmusic">
                    <img src="images/icon/qqmusic.png" />
                    <span>每日30首</span>
                  </div>
                  <!-- 搜索 -->
                  <div class="box-ses searchm" data-car="searchmod">
                    <span class="searchid" data-car="searchmod">搜索音乐FORM MUSIC SERVER.</span>
                    <img class="searchimg" src="images/icon/search.svg" />
                  </div>
                  <!-- TODO... -->
                </article>
              </div>
              <div class="swiper-slide ss user">
                <h1>暂未支持用户功能.</h1>
              </div>
            </div>
          </div>
        </div>
        <!-- 导航栏 -->
        <div class="app-nav">
          <!-- 音乐容器 -->
          <div class="music-coll">
            <div class="mus-coll">
              <!-- 音乐封面 -->
              <div class="mus-img">
                <img class="icon-img" src="icon.png" />
              </div>
              <!-- 音乐标题 -->
              <div class="mus-tit">
                <div class="swiper" id="tarr">
                  <div class="swiper-wrapper warr">
                    <div class="swiper-slide tn">
                      <p class="mus-name n0">AAA</p>
                    </div>
                    <div class="swiper-slide tn">
                      <p class="mus-name n1">BBB</p>
                    </div>
                    <div class="swiper-slide tn">
                      <p class="mus-name n2">CCC</p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 音乐控件 -->
              <div class="mus-kbd">
                <img src="icons/pause.svg" class="icon-img" />
              </div>
            </div>
          </div>
          <!-- 导航栏主要 -->
          <div class="nav-core">
            <div class="ico-mod" data-isa="1">
              <img class="icon-img" src="images/icon/cli-mod.svg" />
            </div>
            <div class="ico-user" data-isa="2">
              <img class="icon-img" src="images/icon/uns-user.svg" />
            </div>
          </div>
        </div>
      </div>
      <!-- 音乐播放全屏 -->
      <div class="animate__animated animate__faster music-player">
        <!-- 音乐播放器头部 -->
        <header class="mp-header">
          <div class="mp-coll back-btn">
            <img src="images/icon/backbtn.svg">
          </div>
          <div class="mp-coll title-player">
            <p>当前模式:DEBUGGER-MOD</p>
          </div>
          <div class="mp-coll more-btn">
            <img src="images/icon/morebtn.svg">
          </div>
        </header>
        <!-- CORE -->
        <article class="mp-art">
          <!-- 默认音乐 -->
          <div class="mpa-define">
            <div class="mpad-cont">
              <!-- 封面 -->
              <div class="mpadc-fm">
                <img src="#">
              </div>
              <!-- 歌名 -->
              <div class="mpadc-song">
                <p>#</p>
              </div>
              <!-- 歌手 -->
              <div class="mpadc-sing">
                <p>#</p>
              </div>
              <!-- 歌词预览 -->
              <div class="mpadc-lrc">
                <p>晚安,各位小朋友.</p>
              </div>
            </div>
          </div>
          <!-- 选择歌曲卡片 -->
          <div class="mpa-select">
            <div class="mpas-window">
              <div class="swiper" id="musicListSwiper">
                <div class="swiper-wrapper music_list_wrapper">
                </div>
              </div>
            </div>
          </div>
        </article>
        <!-- 控件 -->
        <footer class="mp-foot">
          <!-- 进度条 -->
          <div class="prog">
            <div id="LoadProgFoor"></div>
          </div>
          <!-- 常用控件 -->
          <div class="mp-control">
            <!-- 切换播放模式 -->
            <div class="mp-cor-coll mcc-mod">
              <img src="icons/list_loop.svg">
            </div>
            <!-- 上一首 -->
            <div class="mp-cor-coll mcc-up">
              <img src="icons/up.svg">
            </div>
            <!-- 播放暂停 -->
            <div class="mp-cor-coll mcc-pp">
              <img class="happy-happy-happy" src="icons/pause.svg">
            </div>
            <!-- 下一首 -->
            <div class="mp-cor-coll mcc-down">
              <img src="icons/down.svg">
            </div>
            <!-- 歌曲列表 -->
            <div class="mp-cor-coll mcc-list">
              <img src="icons/music_list.svg">
            </div>
          </div>
          <!-- 非常用控件 -->
          <div class="mp-footer">

          </div>
        </footer>
      </div>
    </div>
    <script src="scripts/main.js"></script>
  </body>
</html>
